<template>
	<view class="index">
		<u-navbar :bgColor="config.bg" :titleStyle="{color:config.color}" placeholder>
			<template #left>
				<view class="flex items-center">
					<u-icon name="arrow-left" color="#9fa6b5" size="22" @click="backFn"></u-icon>
					<u-icon name="list-dot" color="#ceb359" size="26" @click="selectFn"></u-icon>
					<view class="text-lg text-white" @click="selectFn">USDC/USDT</view>
				</view>
			</template>
			<template #right>
				<u-icon :name="star==true?'star-fill':'star'" :color="star==true?'#ceb359':'#9fa6b5'" size="22"></u-icon>
			</template>
		</u-navbar>
		<view class="flex justify-between p-4 py-2">
			<view>
				<view class="text-2xl text-white">103648.39</view>
				<view class="text-xl ml-1" :class="isRise==true?'green':'red'">-0.03%</view>
			</view>
			<view class="flex">
				<view class="flex flex-col items-end">
					<view>24h 最高</view>
					<view>24h 最低</view>
					<view>24h 量</view>
				</view>
				<view class="flex flex-col items-end" style="color: #af1f21;">
					<view>104951</view>
					<view>101449</view>
					<view>447769714.6318376</view>
				</view>
			</view>
		</view>
		<view>
			<u-tabs :list="tabs.list" :current="tabs.current" @click="clicktabs" :activeStyle="{color: '#ceb359'}"
			:inactiveStyle="{ color: '#8b8baa' }" :itemStyle="{ height: '44px', width:'16%' }" 
			lineColor="#fff" lineWidth="6" lineHeight="6" style="width: 100%;"></u-tabs>
		</view>
		<u-gap height="6" bgColor="#2B2B37"></u-gap>
		<view class="chart-box">
			<lz-tradingview height="400px"></lz-tradingview>
		</view>
		<view>
			<pageList></pageList>
		</view>
		<view style="height: 88px;"></view>
		<!-- 底部按钮 -->
		<view class="flex p-4 gap-4 fixed bottom-0 left-0 w-full box-border" style="background-color: #292D39;">
			<u-button :text="$t('bibi.mairu')" shape="circle" color="#60c08c" @click="navigetTo('买入')"></u-button>
			<u-button :text="$t('bibi.maichu')" shape="circle" color="#4048ef" @click="navigetTo('卖出')"></u-button>
		</view>
		<!-- 弹出层 -->
		<lz-popup ref="lzpopup" :title="$t('bibi.home')+$t('bibi.jiaoyi')"></lz-popup>
	</view>
</template>

<script>
	import pageList from './pageList.vue'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['userInfo', 'api', 'config']),
		},
		components: {
			pageList
		},
		data() {
			return {
				star:false,// 是否收藏
				isRise:true,// 涨幅
				// 分类
				tabs:{
					current:0,
					list:[{name:'1'+ this.$t('bibi.fenzhong'),id:0},{name: '5'+ this.$t('bibi.fenzhong'),id:1},{name: '15'+ this.$t('bibi.fenzhong'),id:2},
					{name: '30'+ this.$t('bibi.fenzhong'),id:3},{name: '1'+ this.$t('bibi.xiaoshi'),id:4},
					{name: '1'+ this.$t('bibi.tian'),id:5},{name: '1'+ this.$t('bibi.zhou'),id:6},{name: '1'+ this.$t('bibi.yue'),id:7}]
				},
			}
		},
		onLoad(op) {
			console.log(this.tabs.list);
		},
		methods: {
			clicktabs(item) {
				console.log('item', item);
			},
			// 返回
			backFn(){
				uni.navigateBack({
					delta: 1
				});
			},
			// 切换币种
			selectFn(){
				this.$refs.lzpopup.show()
			},
			navigetTo(type){
				uni.reLaunch({
					url:`/pages/tabBar/bibi/bibi?type=${type}`
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.index{
		color: #9FA6B5;
	}
</style>